Context is a way to pass data from a component to all of its children .

<script>
	import Parent from "./Parent.svelte";
</script>

<Parent />

It is a bit inefficient though because we need to pass the props in every child component to its children.

Instead we can use getContext and setContext .

<script>
	import Parentv2 from "./Parentv2.svelte";
</script>

<Parentv2 />

We could also create a file context.js where we export a key as an object export const key = { that we then import in the files.

This wil make sure that we can't have collisions with our contexts (rather than using strings).

Now that we're using context we can do things like this:

<script>
	import Parentv2 from "./Parentv2.svelte";
	import Parent2 from "./Parent2.svelte";
</script>

<Parentv2 />
<Parent2/>

It is important to note that you could also override the context within a child, which will then give the new context to its children .

If you want to retain the parent context for that child component but override in the children, the setContext() needs to be below getContext() in that file.

Also, you can only set and get context in the top level (during component initialization).